<template>
  <div class="group">
    <template v-if="/[03]/.test(topic.type)">
      <el-radio-group v-model="option">
        <template v-if="topic.type==='0'">
          <el-radio :disabled="disabled&&option!==i.toString()" :label="i.toString()" border
                    v-for="(item,i) in topic.option">
            <option-content :option="item" :i="i" :op-list="topic.option"></option-content>
          </el-radio>
        </template>
        <template v-else>
          <el-radio :disabled="disabled&&option!=='1'" border label="1"><p>正确</p></el-radio>
          <el-radio :disabled="disabled&&option!=='2'" border label="0"><p>错误</p></el-radio>
        </template>
      </el-radio-group>
    </template>
    <template v-else-if="/[24]/.test(topic.type)">
      <el-input :disabled="disabled" v-model="option" placeholder="请输入答案"></el-input>
    </template>
    <template v-else-if="topic.type">
      <el-checkbox-group :style="{pointerEvents: disabled?'none':''}" v-model="option">
        <el-checkbox :disabled="disabled&&!option.includes(i.toString())" :label="i.toString()" border
                     v-for="(item,i) in topic.option">
          <option-content :option="item" :i="i" :op-list="topic.option"></option-content>
        </el-checkbox>
      </el-checkbox-group>
    </template>
  </div>
</template>

<script>
  import {letter} from "@/util/function";
  import {mapActions} from "vuex";
  import OptionContent from "@/view/answer/optionContent"

  export default {
    name: "optionGroup",
    components: {OptionContent},
    props: ['topic', 'topicNum', 'disabled'],
    data() {
      return {
        option: []
      }
    },
    watch: {
      option(n) {
        !this.disabled &&
        this.answerTopic({
          answer: n,
          index: this.topicNum
        })
      },
      topic: {
        immediate: true,
        deep: true,
        handler(n) {
          this.option = n.uAnswer
        }
      },
    },
    methods: {
      ...mapActions(['answerTopic']),
      letter
    },
  }
</script>
<style scoped>
  .group {
    padding-left: 50px;
  }

  .group > * {
    width: 80%;
  }

  .group >>> .el-radio__label,
  .group >>> .el-checkbox__label {
    white-space: normal !important;
    word-break: break-all;
    line-height: 22px;
    display: flex;
    align-items: center;
  }

  label {
    /*display: block;*/
    display: flex;
    align-items: center;
    padding-bottom: 12px !important;
    padding-top: 12px !important;
    margin: 0 0 10px 0 !important;
    height: auto !important;
  }
</style>
